<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="function-box">
					<view class="function-item flexWrap">
						<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
							<image class="head-img" :src="avatar"></image>
						</button>
						<image src="../static/user/more-icon.png" class="more-icon"></image>
					</view>
					<view class="function-item flexWrap">
						<view class="item-left flexWrapNo">
							<image class="item-icon" src="../static/user/sex-icon.png"></image>
							男性
						</view>
						<image src="../static/user/more-icon.png" class="more-icon"></image>
					</view>
					<view class="function-item flexWrap">
						<view class="item-left flexWrapNo">
							<image class="item-icon" src="../static/home/nickname-icon.png"></image>
							<input placeholder="昵称" type="nickname" v-model="nickname" placeholder-class="placeholderClass"/>
						</view>
						<image src="../static/user/more-icon.png" class="more-icon"></image>
					</view>
					<view class="function-item flexWrap">
						<view class="item-left flexWrapNo">
							<image class="item-icon" src="../static/home/phone-icon.png"></image>
							<button open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber" class="button">
								{{mobile}}
							</button>
						</view>
						<image src="../static/user/more-icon.png" class="more-icon"></image>
					</view>
				</view>
				<view class="determine-btn" @tap="profile()">确认修改</view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				avatar:"",
				nickname:"",
				mobile:"",
				pageOpc:0,
			};
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		onLoad() {
			this.getUserInfo()
		},
		methods:{
			// 获取用户手机号
			onGetPhoneNumber(e) {
				console.log("onGetPhoneNumber", e);
				this.telCode=e.detail.code
				this.getPhoneNum()
			},
			getPhoneNum(){
				this.$request.post(this.$api.getPhoneNum, {
					code: this.telCode
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						let {
							data = {}
						} = res;
						console.log(data)
						this.mobile=data.phone.phone
					}
				})
			},
			profile(){
				this.$request.post(this.$api.profile, {
					nickname:this.nickname,
					avatar:this.avatar,
					phone:this.mobile
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.$tools.showToast('修改成功')
					}
				})
			},
			// 获取用户信息
			getUserInfo(){
				this.$request.post(this.$api.userInfo, {
					store_id:uni.getStorageSync('store_id')
				}, {
					token:true
				}).then(res => {
					let {
						data = {}
					} = res;
					if (res.code==1) {
						this.avatar=data.avatar
						this.nickname=data.nickname
						this.mobile=data.mobile
					}
				})
			},
			onChooseAvatar(e) {
				this.avatar = e.detail.avatarUrl
				this.uploadFilePromise(e.detail.avatarUrl)
			},
			uploadFilePromise(value) {
				console.log(value)
				let that = this
				uni.showLoading({
					title: '上传中...',
					mask: true
				})
				let uploadUrl = this.$store.state.debug.getWay + this.$api.uploadImg
				uni.uploadFile({
					url: uploadUrl,
					filePath: value,
					fileType: "image",
					name: 'file',
					success: (uploadFileRes) => {
						let data = JSON.parse(uploadFileRes.data).data
						console.log(data)
						that.avatar = data.fullurl
					},
					complete: res => {
						uni.hideLoading()
						console.log(res)
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	button::after {
		border: none;
	}
	button {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
		line-height: 1;
		color: #FFFFFF;
		font-size: 28rpx;
		background: none;
		width: 100%;
		border: none;
	}
	.function-box{
		padding: 30upx;
		.function-title{
			font-size: 32rpx;
			font-family: Source Han Sans CN;
			font-weight: 600;
			color: #111B3B;
			padding: 40rpx 36rpx;
		}
		.function-item{
			padding: 36rpx 32upx;
			position: relative;
			background: #232428;
			border-radius: 20upx;
			margin-bottom: 4upx;
			.avatar-wrapper {
				border: 1upx solid #eee;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}
			.item-left{
				font-size: 34upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #FFFFFF;
				.item-icon{
					width: 96rpx;
					height: 96rpx;
					flex: none;
					margin-right: 17rpx;
				}
			}
			.item-right{
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 44upx;
				color: #FFFFFF;
				.important{
					color: #FFB726;
				}
			}
			.more-icon{
				width: 72upx;
				height: 72upx;
			}
		}
	}
	.determine-btn{
		width: 694rpx;
		height: 144rpx;
		line-height: 144rpx;
		background: linear-gradient( 90deg, #4AA22A 0%, #69D037 100%);
		border-radius: 72rpx;
		font-size: 36upx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		text-align: center;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 164upx;
		margin: auto;
	}
</style>
